<template>
  <my-container :isSearchShow="false">
    <template #btnScope>
      <my-button type="primary" @click="addMenu('0')" :disabled="tableLoading">新增根菜单</my-button>
      <my-button @click="getTableData" :disabled="tableLoading">刷新</my-button>
    </template>

    <!-- 由于此处菜单跟左侧列表一一对应所以不需要分页 pageSize默认999 -->
    <el-table 
      border
      :style="{'border-bottom': '1px solid #ebeef5'}"
      :header-cell-style="{'border-bottom': '1px solid #ebeef5', 'background-color': '#f5f8fc'}"
      :data="tableData" 
      row-key="ID" 
      v-loading="tableLoading" 
      height="650px"
    >
      <!-- 序号框 -->
      <el-table-column label="#" type="index" width="50" align="center"></el-table-column>
      <el-table-column align="left" label="ID" min-width="100" prop="ID" />
      <el-table-column align="left" label="路由Name" show-overflow-tooltip min-width="160" prop="name" />
      <el-table-column align="left" label="路由Path" show-overflow-tooltip min-width="160" prop="path" />
      <el-table-column align="left" label="是否隐藏" min-width="100" prop="hidden">
        <template #default="scope">
          <span>{{ scope.row.hidden?"隐藏":"显示" }}</span>
        </template>
      </el-table-column>
      <el-table-column align="left" label="父节点" min-width="90" prop="parentId" />
      <el-table-column align="left" label="排序" min-width="70" prop="sort" />
      <el-table-column align="left" label="文件路径" min-width="360" prop="component" show-overflow-tooltip/>
      <el-table-column align="left" label="展示名称" min-width="120" prop="authorityName">
        <template #default="scope">
          <span>{{ scope.row.meta.title }}</span>
        </template>
      </el-table-column>
      <el-table-column align="left" label="图标" min-width="140" prop="authorityName">
        <template #default="scope">
          <div v-if="scope.row.meta.icon" class="icon-column">
            <el-icon>
              <component :is="scope.row.meta.icon" />
            </el-icon>
            <span>{{ scope.row.meta.icon }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" fixed="right" label="操作" width="300">
        <template #default="scope">
          <link-btn @click="addMenu(scope.row.ID)">添加子菜单</link-btn>
          <link-btn @click="editMenu(scope.row.ID)">编辑</link-btn>
          <link-btn @click="deleteMenu(scope.row.ID)" type="danger">删除</link-btn>
          <!-- <el-button size="small" icon="plus" @click="addMenu(scope.row.ID)" class="add-button">添加子菜单</el-button>
          <el-button size="small" icon="edit" @click="editMenu(scope.row.ID)" class="edit-button">编辑</el-button>
          <el-button size="small" icon="delete" @click="deleteMenu(scope.row.ID)" class="del-button">删除</el-button> -->
        </template>
      </el-table-column>
    </el-table>

    <el-dialog custom-class="fontWeight" v-model="dialogFormVisible" :before-close="handleClose" :title="dialogTitle"
      width="40%" top="10px">
      <el-form v-if="dialogFormVisible" ref="menuForm" :inline="true" :model="form" :rules="rules" label-position="top">
        <el-form-item label="路由Name" prop="path">
          <el-input v-model="form.name" autocomplete="off" placeholder="唯一英文字符串" @change="changeName" />
        </el-form-item>
        <el-form-item prop="path">
          <template #label>
            <div style="display:inline-flex">
              路由Path
              <el-checkbox v-model="checkFlag" style="float:right;margin-left:20px;margin-top: -7px;">添加参数</el-checkbox>
            </div>
          </template>

          <el-input v-model="form.path" :disabled="!checkFlag" autocomplete="off" placeholder="建议只在后方拼接参数" />
        </el-form-item>
        <el-form-item label="是否隐藏" style="width:30%">
          <el-select v-model="form.hidden" placeholder="是否在列表隐藏" :popper-append-to-body="false">
            <el-option :value="false" label="否" />
            <el-option :value="true" label="是" />
          </el-select>
        </el-form-item>
        <el-form-item label="父节点ID" style="width:30%">
          <el-cascader v-model="form.parentId" style="width:100%" :disabled="!isEdit" :options="menuOption" :popper-append-to-body="false"
            :props="{ checkStrictly: true,label:'title',value:'ID',disabled:'disabled',emitPath:false}"
            :show-all-levels="false" filterable />
        </el-form-item>
        <el-form-item label="文件路径" prop="component" style="width:60%">
          <el-input v-model="form.component" autocomplete="off" />
          <span style="font-size:12px;margin-right:12px; margin-top: 10px;">如果菜单包含子菜单，请创建router-view二级路由页面或者</span>
          <el-button style="margin-top:4px" size="small" @click="form.component = 'view/routerHolder.vue'"
            class="new-button">点我设置</el-button>
        </el-form-item>
        <el-form-item label="展示名称" prop="meta.title" style="width:30%">
          <el-input v-model="form.meta.title" autocomplete="off" />
        </el-form-item>
        <el-form-item label="图标" prop="meta.icon" style="width:30%">
          <icon :meta="form.meta" style="width:100%" />
        </el-form-item>
        <el-form-item label="排序标记" prop="sort" style="width:30%">
          <el-input v-model.number="form.sort" autocomplete="off" />
        </el-form-item>
        <el-form-item label="KeepAlive" prop="meta.keepAlive" style="width:30%">
          <el-select v-model="form.meta.keepAlive" style="width:100%" placeholder="是否keepAlive缓存页面" :popper-append-to-body="false">
            <el-option :value="false" label="否" />
            <el-option :value="true" label="是" />
          </el-select>
        </el-form-item>
        <el-form-item label="CloseTab" prop="meta.closeTab" style="width:30%">
          <el-select v-model="form.meta.closeTab" style="width:100%" placeholder="是否自动关闭tab" :popper-append-to-body="false">
            <el-option :value="false" label="否" />
            <el-option :value="true" label="是" />
          </el-select>
        </el-form-item>
      </el-form>
      <div>
        <el-button size="small" icon="edit" @click="addParameter(form)" style="margin-top:12px; margin-bottom: 10px;">
          新增菜单参数</el-button>
        <el-table header-cell-class-name="table_header" :data="form.parameters" style="width: 100%">
          <el-table-column align="left" prop="type" label="参数类型" width="180">
            <template #default="scope">
              <el-select v-model="scope.row.type" placeholder="请选择" :popper-append-to-body="false">
                <el-option key="query" value="query" label="query" />
                <el-option key="params" value="params" label="params" />
              </el-select>
            </template>
          </el-table-column>
          <el-table-column align="left" prop="key" label="参数key" width="180">
            <template #default="scope">
              <div>
                <el-input v-model="scope.row.key" />
              </div>
            </template>
          </el-table-column>
          <el-table-column align="left" prop="value" label="参数值">
            <template #default="scope">
              <div>
                <el-input v-model="scope.row.value" />
              </div>
            </template>
          </el-table-column>
          <el-table-column align="left">
            <template #default="scope">
              <div>
                <el-button size="small" icon="delete" @click="deleteParameter(form.parameters,scope.$index)"
                  class="del-button">删除</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>

        <el-button style="margin-top:12px; margin-bottom: 10px;" size="small" icon="edit" @click="addBtn(form)">新增可控按钮
        </el-button>
        <el-table header-cell-class-name="table_header" :data="form.menuBtn" style="width: 100%">
          <el-table-column align="left" prop="name" label="按钮名称" width="180">
            <template #default="scope">
              <div>
                <el-input v-model="scope.row.name" />
              </div>
            </template>
          </el-table-column>
          <el-table-column align="left" prop="name" label="备注" width="180">
            <template #default="scope">
              <div>
                <el-input v-model="scope.row.desc" />
              </div>
            </template>
          </el-table-column>
          <el-table-column align="left">
            <template #default="scope">
              <div>
                <el-button size="small" icon="delete" @click="deleteBtn(form.menuBtn,scope.$index)" class="del-button">
                  删除</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button size="small" @click="enterDialog" class="new-button confirm-button">确 定</el-button>
          <el-button size="small" @click="closeDialog"> 取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </my-container>
</template>

<script setup>
import {
  updateBaseMenu,
  getMenuList,
  addBaseMenu,
  deleteBaseMenu,
  getBaseMenuById
} from '@/modules/role/actions/menu'
import icon from './icon.vue'
import warningBar from '@/components/warningBar/warningBar.vue'
import { canRemoveAuthorityBtnApi } from '@/modules/role/actions/authorityBtn'
import { reactive, ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouterStore, useUserStore } from '@/pinia'
const userStore = useUserStore()

const rules = reactive({
  path: [{ required: true, message: '请输入菜单name', trigger: 'blur' }],
  component: [
    { required: true, message: '请输入文件路径', trigger: 'blur' }
  ],
  'meta.title': [
    { required: true, message: '请输入菜单展示名称', trigger: 'blur' }
  ]
})

const tableLoading = ref(false);
const page = ref(1)
const total = ref(0)
const pageSize = ref(999)
const tableData = ref([])
const searchInfo = ref({})
// 查询
const getTableData = async () => {
  tableLoading.value = true;
  const table = await getMenuList({ page: page.value, pageSize: pageSize.value, ...searchInfo.value })
  if (table.code === 0) {
    tableData.value = table.data.list
    total.value = table.data.total
    page.value = table.data.page
    pageSize.value = table.data.pageSize
  }
  tableLoading.value = false;
}

getTableData()

// 新增参数
const addParameter = (form) => {
  if (!form.parameters) {
    form.parameters = []
  }
  form.parameters.push({
    type: 'query',
    key: '',
    value: ''
  })
}
// 删除参数
const deleteParameter = (parameters, index) => {
  parameters.splice(index, 1)
}

// 新增可控按钮
const addBtn = (form) => {
  if (!form.menuBtn) {
    form.menuBtn = []
  }
  form.menuBtn.push({
    name: '',
    desc: '',
  })
}
// 删除可控按钮
const deleteBtn = async (btns, index) => {
  const btn = btns[index]
  if (btn.ID === 0) {
    btns.splice(index, 1)
    return
  }
  const res = await canRemoveAuthorityBtnApi({ id: btn.ID })
  if (res.code === 0) {
    btns.splice(index, 1)
    return
  }
}

const form = ref({
  ID: 0,
  path: '',
  name: '',
  hidden: '',
  parentId: '',
  component: '',
  meta: {
    title: '',
    icon: '',
    defaultMenu: false,
    closeTab: false,
    keepAlive: false
  },
  parameters: [],
  menuBtn: []
})
const changeName = () => {
  form.value.path = form.value.name
}

const handleClose = (done) => {
  initForm()
  done()
}
// 删除菜单
const deleteMenu = (ID) => {
  ElMessageBox.confirm('此操作将永久删除所有角色下该菜单, 是否继续?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(async () => {
      const res = await deleteBaseMenu({ ID })
      if (res.code === 0) {
        ElMessage({
          type: 'success',
          message: '删除成功!'
        })
        if (tableData.value.length === 1 && page.value > 1) {
          page.value--
        }
        getTableData()
      } else if (res.code == 7) {
        ElMessage({
          type: 'error',
          message: res.msg + '，该菜单存在子菜单'
        })
      }
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '已取消删除'
      })
    })
}
// 初始化弹窗内表格方法
const menuForm = ref(null)
const checkFlag = ref(false)
const initForm = () => {
  checkFlag.value = false
  menuForm.value.resetFields()
  form.value = {
    ID: 0,
    path: '',
    name: '',
    hidden: '',
    parentId: '',
    component: '',
    meta: {
      title: '',
      icon: '',
      defaultMenu: false,
      keepAlive: ''
    }
  }
}
// 关闭弹窗

const dialogFormVisible = ref(false)
const closeDialog = () => {
  initForm()
  dialogFormVisible.value = false
}
// 添加menu
const enterDialog = async () => {
  menuForm.value.validate(async valid => {
    if (valid) {
      let res
      if (isEdit.value) {
        res = await updateBaseMenu(form.value)
      } else {
        res = await addBaseMenu(form.value)
      }
      if (res.code === 0) {
        ElMessage({
          type: 'success',
          message: isEdit.value ? '编辑成功' : '添加成功!'
        })
        getTableData()
      }
      initForm()
      dialogFormVisible.value = false
    }
  })
}

const menuOption = ref([
  {
    ID: '0',
    title: '根菜单'
  }
])
const setOptions = () => {
  menuOption.value = [
    {
      ID: '0',
      title: '根目录'
    }
  ]
  setMenuOptions(tableData.value, menuOption.value, false)
}
const setMenuOptions = (menuData, optionsData, disabled) => {
  menuData &&
    menuData.forEach(item => {
      if (item.children && item.children.length) {
        const option = {
          title: item.meta.title,
          ID: String(item.ID),
          disabled: disabled || item.ID === form.value.ID,
          children: []
        }
        setMenuOptions(
          item.children,
          option.children,
          disabled || item.ID === form.value.ID
        )
        optionsData.push(option)
      } else {
        const option = {
          title: item.meta.title,
          ID: String(item.ID),
          disabled: disabled || item.ID === form.value.ID
        }
        optionsData.push(option)
      }
    })
}

// 添加菜单方法，id为 0则为添加根菜单
const isEdit = ref(false)
const dialogTitle = ref('新增菜单')
const addMenu = (id) => {
  dialogTitle.value = '新增菜单'
  form.value.parentId = String(id)
  isEdit.value = false
  setOptions()
  dialogFormVisible.value = true
}
// 修改菜单方法
const editMenu = async (id) => {
  dialogTitle.value = '编辑菜单'
  const res = await getBaseMenuById({ id })
  form.value = res.data.menu
  isEdit.value = true
  setOptions()
  dialogFormVisible.value = true
}

</script>

<script>
export default {
  name: 'Menus',
}
</script>

<style scoped lang="scss">
.warning {
  color: #dc143c;
}

.icon-column {
  display: flex;
  align-items: center;

  .el-icon {
    margin-right: 8px;
  }
}
</style>
